<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border: 3px solid black
        }
        th {background-color:black;color : white}
        #matrix td {border:1px solid black}
    </style>
    <title>DOM Build expression</title>
    <script type="text/javascript" src="ie6modernizer.js"></script>
    <script type="text/javascript" src="cdee.js">
    </script>

    <script type="text/javascript">

        function makeColor(elm, key){
            var rowData = elm.parentNode.getAttribute('data-row');
            var colorCode = (parseInt(rowData) + parseInt(key));
            var color = (colorCode == 1) ? "white" : "black";
            console.log("makeColor: " + color + ", rowData: " + rowData + ", key: " + key + ", colorCode:" + colorCode);
            return color;

        };

        var cbRows = [0,1,0,1,0,1,0,1];
        var cbCols = [0,1,0,1,0,1,0,1];

        var checkboard = {
            //"$style.border":"'3px solid black'",
            "(cbRows)":{"<TR>":
                {"@data-row": "key","@height":"'20px'",
                    "(cbCols)":{"<TD>":{"@bgcolor":"makeColor(elm,key)","@width":"'20px'","$innerHTML":"'&nbsp;'"}}}}
        };


        var matrix = {
            "[1,2]":{"<TR>":{"@rownr":"key","[1,2]":{"<TD>":"'('+key+','+elm.getAttribute('rownr')+')'"}}}
        };

        var TBodyMatrix = {
            "*":{"<TR>":{"*":{"<TD>":"model"}}}
        };

        var recordset = [{name:"Jan Jansen", age:"10"}, {name:"Jan Klaassen", age:"15"}];




    </script>
</head>


<body>

<H1 data-cdee="cdee.header" data-text="for tables"></H1>

<BR>

<table id="matrix" data-cdee="matrix"></table>
<BR>

<table data-cdee="checkboard"></table>
<br>

<table data-cdee="TBodyMatrix" data-model="recordset">
    <TR><TH>name</TH><TH>age</TH></TR>
</table>

<br>



</body>
</html>
